<template>
  <div>
    <el-row :gutter="20">
      <el-col>
        <el-tag
            v-for="tag in tags"
            :key="tag.name"
            closable
            :type="tag.type">
          {{tag.name}}
        </el-tag>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-progress :percentage="50"></el-progress>
        <el-progress :percentage="100" :format="format"></el-progress>
        <el-progress :percentage="100" status="success"></el-progress>
        <el-progress :percentage="100" status="warning"></el-progress>
        <el-progress :percentage="50" status="exception"></el-progress>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data(){
    return{
      tags: [
        { name: '标签一', type: '' },
        { name: '标签二', type: 'success' },
        { name: '标签三', type: 'info' },
        { name: '标签四', type: 'warning' },
        { name: '标签五', type: 'danger' }
      ],
      format(percentage) {
        return percentage === 100 ? '满' : `${percentage}%`;
      }
    }
  }
}
</script>

<style scoped>
.el-row,h4{
  margin-top: 20px;
}
.el-tag{
  margin: 10px;
}
.el-progress{
  margin-top: 20px;
}
</style>